import React, { Component } from 'react';
import YwxNavBar from '../../components/common/YwxNavBar/YwxNavBar';
import { List, WhiteSpace, InputItem, Toast, Modal } from 'antd-mobile';
import './UserInfo.less';
const Item = List.Item;


export default class UserInfo extends Component {


    constructor(props) {
        super(props);
        this.state = {
            avatar: '',
            name: '',
            personal: '',
            account: '',
            phone: '',
            commission: '',
        }
        this.fetchData();
    }

    fetchData = () => {
        React.$utils.request({
            url: '/app/user'
        }).then(res => {
            let {
                avatar,
                name,
                personal,
                account,
                phone,
                commission,
            } = res
            this.setState({
                avatar,
                name,
                personal,
                account,
                phone,
                commission
            })
        })
    }

    upgrade = () => {
        Modal.alert('提醒', '确定要申请提升佣金吗？',
            [
                { text: '取消', onPress: () => { } },
                {
                    text: '确定', onPress: () => {
                        React.$utils.request({
                            url: '/app/upgrade',
                            method: 'post'
                        }).then(res => {
                            Toast.success('申请成功');
                        })
                    }
                },
            ]
        )
    };

    render() {
        let {
            avatar,
            name,
            personal,
            account,
            phone,
            commission,
        } = this.state;

        const avatarElement = (
            <img src={avatar} alt="" style={{ display: 'inline-block', width: '0.8rem', height: '0.8rem', backgroundColor: '#F63E39', borderRadius: '50%' }} />
        );

        const buttonElement = (
            <div
                onClick={this.upgrade}
                style={{ background: 'linear-gradient(180deg,rgba(252,99,95,1),rgba(246,62,57,1))', color: '#fff', padding: '0.15rem 0.1rem' }}>
                提升佣金
            </div>
        )

        return (
            <div>
                <YwxNavBar>个人信息</YwxNavBar>
                <WhiteSpace />
                <List>
                    <Item extra={avatarElement}>头像</Item>
                    <InputItem editable={false} value={name}>姓名</InputItem>
                    <InputItem editable={false} value={personal}>ID编号</InputItem>
                    <InputItem editable={false} value={phone}>手机号码</InputItem>
                    <InputItem editable={false} value={commission + '元/单'} extra={buttonElement}>佣金价格</InputItem>
                    <InputItem editable={false} value={account}>云闪付账号</InputItem>
                </List>
            </div>
        );
    }
}